<template>
  <crec-modal
    :title="gFormTitle"
    :width="width"
    :visible="gVisible"
    :maskClosable="false"
    :footer="gFormDisabled ? null : undefined"
    :confirmLoading="gFormLoading"
    @ok="gFormSubmit"
    @cancel="gFormCancel"
  >
    <!-- 表单部分 -->
    <crec-form-model
      :labelCol="gLabelCol"
      :wrapperCol="gWrapperCol"
      :rules="gFormRules"
      :model="gFormData"
      ref="gFormRef"
      :class="{ 'form-content-data': true, disabled: gFormDisabled }"
      layout="inline"
    >
      <!-- 注意： row里面只有2个col， 如果都放在一个row里面，某个col高度增加可能导致错误； 所以采用2个一组的形式 -->
      <crec-row>
        <crec-col :span="double ? 12 : 24">
          <crec-form-model-item class="w-full" prop="name" label="姓名">
            <crec-input v-model.trim="gFormData.name" placeholder="请输入姓名"></crec-input>
          </crec-form-model-item>
        </crec-col>
        <crec-col :span="double ? 12 : 24">
          <crec-form-model-item class="w-full" prop="sex" label="性别">
            <crec-radio-group :options="sexOptions" v-model="gFormData.sex" />
          </crec-form-model-item>
        </crec-col>
      </crec-row>
      <crec-row>
        <crec-col :span="double ? 12 : 24">
          <crec-form-model-item class="w-full" prop="age" label="年龄">
            <crec-input v-model.number="gFormData.age" placeholder="请输入年龄"></crec-input>
          </crec-form-model-item>
        </crec-col>
        <crec-col :span="double ? 12 : 24">
          <crec-form-model-item class="w-full" prop="phone" label="手机号">
            <crec-input v-model.number="gFormData.phone" placeholder="请输入手机号"></crec-input>
          </crec-form-model-item>
        </crec-col>
      </crec-row>
      <crec-row>
        <crec-col :span="double ? 12 : 24">
          <crec-form-model-item class="w-full" prop="entryDate" label="入学日期">
            <crec-date-picker class="w-full" v-model="gFormData.entryDate" placeholder="请选择" />
          </crec-form-model-item>
        </crec-col>
        <crec-col :span="double ? 12 : 24">
          <crec-form-model-item class="w-full" prop="love" label="爱好">
            <crec-select mode="multiple" v-model="gFormData.love" placeholder="请选择爱好">
              <crec-select-option value="lq">篮球</crec-select-option>
              <crec-select-option value="zq">足球</crec-select-option>
              <crec-select-option value="ymq">羽毛球</crec-select-option>
            </crec-select>
          </crec-form-model-item>
        </crec-col>
      </crec-row>
      <crec-row>
        <crec-col :span="double ? 12 : 24">
          <crec-form-model-item class="w-full" prop="address" label="家庭住址">
            <crec-input class="w-full" v-model="gFormData.address" placeholder="请输入" />
          </crec-form-model-item>
        </crec-col>
        <crec-col :span="double ? 12 : 24">
          <crec-form-model-item class="w-full" prop="state" label="状态">
            <crec-radio-group :options="stateOption" v-model="gFormData.state" />
          </crec-form-model-item>
        </crec-col>
      </crec-row>
      <!-- 便于复制 -->
      <!--
      <crec-row>
        <crec-col :span="double ? 12 : 24"></crec-col>
        <crec-col :span="double ? 12 : 24"></crec-col>
      </crec-row>
      -->
    </crec-form-model>
  </crec-modal>
</template>
<script>
import { addEditInfo } from '@@/mixins/crud/index'
import { infoUserApi, createUserApi, updateUserApi } from '@@/api/demo'
export default {
  name: 'Edit',
  mixins: [addEditInfo],
  data () {
    return {
      addEditConfig: {
        moduleName: '用户',
        addApiFn: createUserApi,
        editApiFn: updateUserApi,
        infoApiFn: infoUserApi,
        beforeShowInfoFn: this.generateData, // 显示详情前执行函数(用于将后端返回的数据进行处理，再赋给表单)
        beforeRequestFn: this.beforeSubmitFn // 新增或修改求前执行函数, 用于整理要提交的信息
        // afterRequestFn: null, // 新增或修改请求后执行函数
        // beforeCloseFn: null // 关闭弹框前执行函数
      },
      // 表单数据
      gFormData: {
        state: 1,
        sex: 1,
        phone: 15156051180,
        love: []
      },
      // 表单验证规则
      // 参考文档：https://github.com/yiminghe/async-validator
      gFormRules: {
        name: [
          { required: true, message: '请输入性别', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在2到5', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '格式不正确', trigger: 'blur' }
        ],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        entryDate: [{ required: true, message: '请选择日期', trigger: ['blur', 'change'] }],
        love: [{ type: 'array', min: 1, required: true, message: '请选择爱好', trigger: 'change' }]
      },
      // 字典数据
      sexOptions: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
        { label: '其他', value: 3 }
      ],
      stateOption: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 2 }
      ]
    }
  },
  methods: {
    /**
     * 获取数据之后的回显
     * @param {Object} responseData 后端返回的数据
     * @returns {Object} 处理好的数据，用于回显到表单(一定要返回)
     */
    generateData (responseData) {
      // 建议： 都拷贝一份，然后处理，再返回。防止有引用关联
      // 加工处理数据
      const data = responseData.data
      // 返回
      return {
        ...data,
        love: data.love.split(',')
      }
    },
    /**
     * 发生请求之前对数据处理的函数
     * @param {Object} data 拷贝后的表单数据
     * @returns {Object} 整理好的数据，用于提交给后端(一定要返回)
     */
    beforeSubmitFn (data) {
      // 建议： 都拷贝一份，然后处理，再返回。防止有引用关联
      // 处理数据
      // 返回
      return {
        ...data,
        entryDate: this.$formateDate(data.entryDate, 'YYYY-MM-DD'),
        love: data.love.join(','),
        t: new Date().getTime()
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
